<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>相对-绝对定位</title>
</head>
<style>
    .father{
        background-color: gray;
        width: 400px;
        margin: 50px;
        height: 400px;
        /*相对定位-占位置  相对于自己的位置*/
        position: relative;
    }
    .son{
        width: 100px;
        height: 100px;
        /*绝对定位-不占位置
        .绝对定位是元素以带有定位的父级元素来移动位置 (拼爹型)
        ·完全脱标——完全不占位置;
·       .父元素没有定位，则以浏览器为准定位*/
        position: absolute;
        /*如果儿子的宽高或者其他需要继承父亲宽高的属性使用了百分比，那么父亲的高度必须设置,不然会没有效果，宽度不影响*/
        left: 50%;
        top: 50%;
        /*以自身为xy坐标轴，移动自身长度50%的距离*/
        transform:translate(-50%, -50%);
        background-color: pink;
    }
    .son1{
        background-color: aqua;
        width: 100px;
        height: 100px;
    }
</style>
<body>
<div class="father">
    <div class="son"></div>
    <div class="son1"></div>
</div>
</body>
</html>